<template>
  <view class="content">
    <van-nav-bar title="平台客服" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="customer"
      :style="{
        height: 'calc(100vh - ' + safeAreaTop + 'px - ' + safeAreaBot + 'px)',
      }"
    >
      <view class="customer-title"> 童装库存网 </view>
      <!-- <view class="customer-des"> 小程序备注或宣传文案，可写可不写 </view> -->
      <view class="customer-box">
        <view class="customer-top">
          <text class="top-name">客服微信号</text>
          <text class="text">{{ info.kefu_wx_code }}</text>
          <view class="copy" @click="copyHandle">复制</view>
          <view class="tip">会员开通、制定推广可联系客服办理<br />货源问题、商品资讯请联系卖家</view>
        </view>
        <view class="customer-bot">
          <image class="img-box" :src="info.wx_kefu_qrcode" />
          <view class="tip">长按识别二维码加客服微信<br />APP内请搜素微信号添加</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
import { useUserStore } from '@/store/modules/user'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const state = reactive({
      safeAreaTop: 0,
      safeAreaBot: 0,
      info: {},
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const copyHandle = () => {
      uni.setClipboardData({
        data: state.info.kefu_wx_code,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
        fail: function () {
          console.log(888)
        },
      })
    }
    onMounted(() => {
      state.info = useUserStore().getField()
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    return {
      ...toRefs(state),
      onClickLeft,
      copyHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #19130e;
}
.customer {
  height: calc(100vh - 200rpx);
  overflow-y: auto;
  text-align: center;
  background: #0e1c34 url('https://images.tongzhuangkc.com/tz/Ellipse.png') no-repeat top 54rpx center;
  background-size: 404rpx 404rpx;
}
.customer-title {
  margin: 80rpx 0 16rpx;
  font-size: 48rpx;
  line-height: 64rpx;
  color: #fff;
  font-weight: 600;
}
.customer-des {
  font-size: 28rpx;
  color: #d1e1ff;
  line-height: 32rpx;
  margin-bottom: 80rpx;
}
.customer-box {
  margin: 80rpx 64rpx 0;
  height: 808rpx;
  padding: 50rpx 88rpx 40rpx;
  background: url('https://images.tongzhuangkc.com/tz/kefu1.png') no-repeat;
  background-size: 100% 100%;
  .customer-top {
    text {
      display: block;
      text-align: center;
    }
    .top-name {
      font-size: 24rpx;
      color: #7f8798;
      line-height: 40rpx;
    }
    .text {
      font-size: 48rpx;
      color: #2b303b;
      line-height: 64rpx;
      margin: 16rpx 0;
    }
    .copy {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 144rpx;
      height: 56rpx;
      margin: 0 auto 48rpx;
      background: #3775f2;
      border-radius: 40rpx;
      color: #fff;
      font-size: 24rpx;
    }
    .tip {
      font-size: 28rpx;
      font-weight: 500;
      color: #ff8345;
      line-height: 40rpx;
    }
  }
  .customer-bot {
    margin-top: 78rpx;
    .img-box {
      height: 302rpx;
      width: 302rpx;
      margin-bottom: 32rpx;
    }
    .tip {
      font-size: 24rpx;
      font-weight: 400;
      color: #7f8798;
      line-height: 32rpx;
    }
  }
}
</style>
